<template>
  <div>
    <el-upload
     class="avatar-uploader"
      :action=baseuUrl
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handSess"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-button type="primary" @click="addLL">主要按钮</el-button>
  </div>
</template>
<script>
import request from "@/utils/request";
import {server} from "@/utils/env";
export default {
  name: "Add",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      imgList: [],
      baseuUrl:''
    };
  },
  created(){
    this.baseuUrl=server.baseURL+"/generator/upload/front/upload"
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handSess(file) {
      console.log(file.path);
      let imgList = this.imgList;
      let index = imgList.length;
      let arr = `图${index}:${file.path}`;
      this.imgList.push(arr);
      console.log(this.imgList.toString());
    },
    addLL() {
      let query={
        activityId:1,
        image:this.imgList.toString()
      }
      request({
        url: "/generator/activity/front/clock",
        method: "post",
        data: query,
      }).then((response) => {
        console.log(response);
        // alert(JSON.stringify(response.token));
      });
    },
  },
};
</script>

<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
